<template >
	<div class="content">
		<div class="content-header">班级管理</div>
		<div class="content-table">
			<el-form inline size="mini">
				<el-form-item >
					<el-input  placeholder="班级名称" v-model="form.name"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="getList">查 询</el-button>
					<el-button icon="el-icon-refresh" @click="resetList">重 置</el-button>
					<el-button type="primary" icon="el-icon-plus" @click="addDialog = true">新 建</el-button>
				</el-form-item>
			</el-form>
			<el-table
					:data="tableData"
					stripe
					style="width: 100%">
				<el-table-column
						prop="number"
						label="自增编号"
						align="center"
				>
				</el-table-column>
				<el-table-column
						prop="name"
						label="班级名称"
						align="center"
				>
				</el-table-column>
				<el-table-column
						prop="majorName"
						label="对应专业"
						align="center"
				>
				</el-table-column>
				<el-table-column
						prop="userName"
						label="授课老师"
						align="center"
				>
				</el-table-column>
				<el-table-column
						prop="startTime"
						label="授课时间"
						show-overflow-tooltip
						align="center"
				>
				</el-table-column>
				<el-table-column
						label="操作"
						align="center"
				>
					<template slot-scope="scope">
						<el-button type="primary" size="mini" @click="openEdit(scope.row)">编 辑</el-button>
						<el-button type="danger" size="mini" @click="del(scope.row.id)">删 除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="content-footer">
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					background
					:page-size="10"
					small
					layout="total, prev, pager, next, jumper"
					:total="total">
			</el-pagination>
		</div>
		<!--新增班级-->
		<el-dialog title="新增班级" :visible.sync="addDialog" width="25%">
			<el-form label-width="90px" size="small" :model="addForm" :rules="rules" ref="addForm">
				<el-form-item label="班级名称:" prop="name">
					<el-input v-model="addForm.name" placeholder="请输入班级名称"></el-input>
				</el-form-item>
				<el-form-item label="授课教师:">
					<el-select v-model="addForm.userId"  placeholder="请选择授课教师" style="width: 100%">
						<el-option
								v-for="item in teacherList"
								:key="item.id"
								:label="item.userName"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="对应专业:">
					<el-select v-model="addForm.majorId"  placeholder="请选择对应专业" style="width: 100%">
						<el-option
								v-for="item in specialityList"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="授课时间:" prop="startTime">
					<el-date-picker
							v-model="addForm.startTime"
							type="daterange"
							format="yyyy/MM/dd"
							value-format="yyyy/MM/dd"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="addDialog = false" size="small">取 消</el-button>
				<el-button type="primary" @click="submit('addForm')" size="small">确 定</el-button>
			</div>
		</el-dialog>
		<!--新增班级-->
		<el-dialog title="编辑班级" :visible.sync="editDialog" width="25%">
			<el-form label-width="90px" size="small" :model="editForm" :rules="rules" ref="editForm">
				<el-form-item label="班级名称:" prop="name">
					<el-input v-model="editForm.name" placeholder="请输入班级名称"></el-input>
				</el-form-item>
				<el-form-item label="授课教师:">
					<el-select v-model="editForm.userId"  placeholder="请选择授课教师" style="width: 100%">
						<el-option
								v-for="item in teacherList"
								:key="item.id"
								:label="item.userName"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="对应专业:">
					<el-select v-model="editForm.majorId"  placeholder="请选择对应专业" style="width: 100%">
						<el-option
								v-for="item in specialityList"
								:key="item.id"
								:label="item.name"
								:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="授课时间:" prop="startTime">
					<el-date-picker
							v-model="editForm.startTime"
							type="daterange"
							format="yyyy/MM/dd"
							value-format="yyyy/MM/dd"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期">
					</el-date-picker>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="editDialog = false" size="small">取 消</el-button>
				<el-button type="primary" @click="submitEdit('editForm')" size="small">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template >

<script >
    import {classList,addClass,delClass,editClass} from "../api/class";
    import {editSpeciality, specialityPage} from "../api/speciality";
	import {teacherList} from "../api/user";

    export default {
        data(){
            return{
                specialityList:[],
                teacherList:[],
                form:{
                    name: "",
                    pageIndex: 1,
                    pageSize: 10
                },
                value:'',
                tableData:[],
                total:null,
				addDialog :false,
                addForm:{
                    majorId: null,
                    name: "",
                    startTime: null,
                    userId: null
                },
                rules: {
                    name: [
                        {required: true, message: '请输入专业名称', trigger: 'blur'},
                        {min: 2, max: 5, message: '长度在 2 到 10 个字符', trigger: 'blur'}
                    ],
                    startTime: [
                        {  required: true, message: '请选择日期', trigger: 'blur' }
                    ],
                },
                editDialog:false,
                editForm:{}
            }
        },
		mounted() {
            this.getSpecialityList()
			this.getTeacherList()
            this.getList()
        },
        methods: {
            //获取专业数据
            async getSpecialityList(){
                const { data } = await specialityPage()
                if (data.code === 200){
                    this.specialityList = data.data
                }
            },
			//获取教师
            async getTeacherList(){
                const { data } = await teacherList()
                if (data.code === 200){
                    this.teacherList = data.data
                }
            },
            //查询列表
            async getList(){
                const { data } = await classList(this.form)
                if (data.code === 200){
                    this.tableData = data.data.data
                    this.total = data.data.total
                }
            },
			//新增班级
            submit(addForm){
                this.$refs[addForm].validate((valid) => {
                    if (valid) {
						this.addForm.startTime = this.addForm.startTime.join('-')
                        addClass(this.addForm).then(res => {
                            console.log(res)
                            if (res.data.code === 200){
                                this.$notify.success(res.data.message)
                                this.addDialog = false
                                this.addForm = {}
                                this.getList()
                            }
                        })
                    }
                });
			},
            //重置
            resetList(){
                this.form.name = ''
                this.getList()
            },
            //删除
            del(id){
                this.$confirm('删除该班级, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    delClass(id).then(res => {
                        if (res.data.code === 200){
                            this.$notify.success(res.data.message)
                            this.getList()
                        }
                    })
                })
            },
            //编辑弹窗
            openEdit(item){
                const { id,name,majorId,startTime,userId} = item
                this.editForm = {  id,name,majorId,startTime:startTime.split('-'),userId}
                this.editDialog = true
            },
            //提交编辑
            submitEdit(editForm){
                this.$refs[editForm].validate((valid) => {
                    if (valid) {
                        this.editForm.startTime = this.editForm.startTime.join('-')
                        editClass(this.editForm).then(res => {
                            if (res.data.code === 200){
                                this.$notify.success(res.data.message)
                                this.editDialog = false
                                this.editForm = {}
                                this.getList()
                            }
                        })
                    }
                });
            },
            //分页
            handleSizeChange(val) {
                this.form.pageSize = val
                this.getList()
            },
            handleCurrentChange(val) {
                this.form.pageIndex = val
                this.getList()
            }
        },
    }
</script >

<style scoped lang="less" >
	@import "../assets/style/common";
</style >
